<template>
  <div style="height: 100%">
    <van-nav-bar
      class="header"
      title="商品详情"
      left-text="返回"
      right-text="保存"
      left-arrow
      @click-left="backToList"
      @click-right="save">
    </van-nav-bar>
    <div class="main">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
      <van-cell-group>
        <van-field
          v-model="form.fname"
          label-width="100px"
          label="商品名称："
          name="商品名称"
          v-validate="'required'"
          data-vv-scope="productEditForm"
          :error="errors.has('productEditForm.商品名称')"
          :error-message="errors.first('productEditForm.商品名称')"
          required />
        <van-field
          v-model="form.fclassidname"
          label-width="100px"
          label="商品类别："
          name="商品类别"
          v-validate="'required'"
          data-vv-scope="productEditForm"
          :error="errors.has('productEditForm.商品类别')"
          :error-message="errors.first('productEditForm.商品类别')"
          @click="productClassPickerOpen"
          required
          readonly
          is-link/>
        <van-field
          v-model="form.fspec"
          label="商品包装规格："
          label-width="100px" />
        <van-field
          v-model="form.ftrademark"
          label="商品商标："
          label-width="100px" />
        <van-field
          v-model="form.fbrand"
          label-width="100px"
          label="商品品牌：" />
        <van-field
          v-model="form.fstandardname"
          label="执行标准："
          label-width="100px"
          @click="standardPickerOpen"
          readonly
          is-link />
        <van-field
          v-model="form.flicence"
          label="生产许可证号："
          label-width="100px" />
        <van-field
          v-model="form.ftag"
          label="标签标识信息："
          label-width="100px" />
        <van-field
          v-model="form.fproductcode"
          label="商品码："
          label-width="100px" />
        <van-field
          v-model="form.fisstate"
          label="商品审核状态："
          label-width="100px"
          readonly/>
        <van-field
          v-model="form.fapprovemessage"
          label="商品审核信息："
          label-width="100px"
          readonly/>
      </van-cell-group>
      <div style="padding: 10px 16px;text-align: right">
        <van-button @click="save" size="small" type="info">保存</van-button>
      </div>
    </div>
    <footer-btn></footer-btn>
    <van-popup v-model="productClass.visible" position="bottom">
      <van-picker
        show-toolbar
        :columns="productClass.data"
        @cancel="productClass.visible = false"
        @confirm="productClassConfirm" />
    </van-popup>
    <van-popup v-model="standard.visible" position="bottom">
      <van-picker
        show-toolbar
        :columns="standard.data"
        @cancel="standard.visible = false"
        @confirm="standardConfirm" />
    </van-popup>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
  NavBar,
  Button,
  Field,
  CellGroup,
  Popup,
  Picker,
  Swipe,
  SwipeItem,
  Toast,
} from 'vant'
import footerBtn from '@/components/footerBtn'
import {
  limscustomerproduct_searchforwxbyid,
  limsproductclass_searchforwx,
  limscustomerproduct_insert,
  limscustomerproduct_edit
} from '@/api/product'
export default {
  name: 'productEdit',
  components: {
    footerBtn,
    [NavBar.name]:NavBar,
    [Button.name]:Button,
    [Field.name]:Field,
    [CellGroup.name]:CellGroup,
    [Popup.name]:Popup,
    [Picker.name]:Picker,
    [Swipe.name]:Swipe,
    [SwipeItem.name]:SwipeItem,
  },
  created() {
    this.form.userid = 'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3'
    const fid = this.$route.query.fid
    if (fid) {
      this.form.fid = fid
      this.getData()
    } else {
      this.form.fid = ''
    }
  },
  data() {
    return {
      form: {
        fuserid: Cookies.get('fusreid'),
        fid: '',
        fname: '',
        fclassid: '',
        fclassidname: '',
        fspec: '',
        ftrademark: '',
        fbrand: '',
        fstandardid: '',
        fstandardname: '',
        flicence: '',
        ftag: '',
        fproductcode: '',
        fisstate: '',
        fapprovemessage: ''
      },
      productClass: {
        visible: false,
        data: []
      },
      standard: {
        visible: false,
        data: []
      }
    }
  },
  methods: {
    getData() {
      limscustomerproduct_searchforwxbyid({
        fid: this.form.fid
      }).then(res => {
        for (const key in this.form) {
          if (res.rows[0][key]) {
            this.form[key] = res.rows[0][key]
          }
        }
      })
    },
    productClassPickerOpen() {
      limsproductclass_searchforwx().then(res => {
        this.productClass.data = res.rows
        this.productClass.data.forEach(el => {
          el.text = el.fname
        })
        this.productClass.visible = true
      })
    },
    productClassConfirm(value) {
      this.form.fclassid = value.fid
      this.form.fclassidname = value.fname
      this.productClass.visible = false
    },
    standardPickerOpen() {

    },
    standardConfirm(value) {
      this.standard.visible = false
    },
    save() {
      this.$validator.validateAll('productEditForm').then((valid) => {
        if (valid) {
          if (this.form.fid === '') {
            limscustomerproduct_insert(this.form).then(res => {
              if (res.isSuccess) {
                Toast.fail('保存成功！')
                this.$router.push({ path:'/productList' })
              } else {
                Toast.fail(res.message)
              }
            })
          } else {
            limscustomerproduct_edit(this.form).then(res => {
              if (res.isSuccess) {
                Toast.fail('保存成功！')
                this.$router.push({ path:'/productList' })
              } else {
                Toast.fail(res.message)
              }
            })
          }
        }
      })
    },
    backToList() {
      history.go(-1)
    }
  }
}
</script>

<style>

</style>